<template>
  <!-- 
    -->
  <el-dialog :model-value="visible" class="myDialogClass " :close-on-click-modal="false" :title="title" :width="width + 'px'"
    :height="height + 'px'"  :top="marginTop" destroy-on-close :draggable="false" :before-close="onClose" append-to-body :show-close="true">
    <template #header>
      <slot name="myHeader" />
    </template>
    <!-- 
     :style="{ height: height + 'px' }" -->
    <div class="container">
      <slot name="content" />
    </div>
    <template #footer v-if="showFooter">
      <slot name="myFooter" />
    </template>
  </el-dialog>
</template>

<script setup lang='ts'>
const emit = defineEmits(['onClose'])
const props = defineProps({
  title: {//弹框标题
    type: String,
    default: '标题'
  },
  visible: { //控制弹框的展示和影藏
    type: Boolean,
    default: true
  },
  width: {
    type: Number,
    default: 600
  },
  height: {
    type: Number,
    default: 250
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  marginTop:{
    type:String,
    default:'5vh'
  }
})

const onClose=()=>{
  emit('onClose')
}

</script>
<style>


</style>
